<template>
  <div>
    <Dialog
      :title="title"
      :model-value="visible"
      min-width="1280px"
      width="80%"
      :before-close="closeForm"
    >
      <el-row :gutter="8">
        <el-col :span="8">
          <Descriptions
            labelAlign="right"
            key="datum"
            :collapse="false"
            :column="1"
            :data="company"
            :schema="comScheme"
          />
        </el-col>
        <el-col :span="16">
          <ContentWrap :title="company.FullName + (isEntry ? '入职' : '') + '员工列表'">
            <template #extr>
              <el-switch
                v-model="isEntry"
                active-text="显示入职员工"
                inactive-text="显示本公司员工"
              />
            </template>
            <empListView :company-id="id" :is-entry="isEntry" :is-load="isLoad" />
          </ContentWrap>
        </el-col>
      </el-row>
    </Dialog>
    <empModel :id="empId" :visible="empVisible" @close="empVisible = false" />
  </div>
</template>

<script>
import * as companyApi from '@/api/base/company'
import companySelect from '@/components/company/src/companySelect.vue'
import { HrEnumDic } from '@/config/publicDic'
import { empModel, empListView } from '@/components/emp'
import { Dialog } from '@/components/Dialog'
import { Descriptions } from '@/components/Descriptions'
import { enumDicItem } from '@/components/base'
import { template } from 'lodash-es'
export default {
  name: 'DeptView',
  components: {
    empModel,
    Dialog,
    Descriptions,
    empListView
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      comScheme: [],
      title: '公司信息',
      company: {},
      isLoad: false,
      isEntry: false,
      empId: null,
      empVisible: false
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        } else {
          this.isLoad = false
        }
      },
      immediate: true
    }
  },
  methods: {
    intScheme() {
      this.comScheme = [
        {
          field: 'FullName',
          label: '公司全称'
        },
        {
          field: 'ShortName',
          label: '简称'
        },
        {
          field: 'ParentId',
          label: '所属上级',
          slots: {
            default: () => {
              return h(companySelect, {
                modelValue: this.company.ParentId,
                readonly: true,
                placeholder: '所属上级'
              })
            }
          }
        },
        {
          field: 'CompanyType',
          label: '公司类型',
          slots: {
            default: () => {
              return h(enumDicItem, {
                modelValue: this.company.CompanyType,
                readonly: true,
                dicKey: HrEnumDic.companyType,
                placeholder: '公司类型'
              })
            }
          }
        }
      ]
    },
    showEmp(empId) {
      this.empId = empId
      this.empVisible = true
    },
    async reset() {
      const data = await companyApi.Get(this.id)
      this.company = data
      this.title = '查看公司:' + data.FullName
      this.intScheme()
      this.isLoad = true
    },
    closeForm() {
      this.$emit('update:visible', false)
    }
  }
}
</script>
